<block name="style">
    <style type="text/css">
         .ajax-form{ overflow: hidden;}
         .ajax-form .form-div{ overflow: hidden; margin-bottom: 10px;}
         .ajax-form .form-div .left{ text-align: right;}
         .is_confirm_text{ font-size: 18px; text-align: center;}
         .is_confirm_box input{ width: 50%; float: left;}
    </style>
</block>
<div class="popup-gallery">

	<notempty name="product_comment.images">
		<php>$images = $product_comment['images'];</php>
		<volist name="images" id="image">
			<div class="each">
				<a href="{$image}" title={:L("_CLICK_TO_SEE_THE_BIG_PICTURE_WITH_DOUBLE_")}>
					<img src="{$image}">
				</a>
				<div class="text-center opacity del_btn" ></div>
			</div>
		</volist>
	</notempty>
</div>
<script>
	$(document).ready(function () {
		$('.popup-gallery').each(function () { // the containers for all your galleries
			$(this).magnificPopup({
				delegate: 'a',
				type: 'image',
				tLoading: '{:L("_LOADING_")}#%curr%...',
				mainClass: 'mfp-img-mobile',
				gallery: {
					enabled: true,
					navigateByImgClick: true,
					preload: [0, 1] // Will preload 0 - before current, and 1 after the current image

				},
				image: {
					tError: '<a href="%url%">{:L("_PICTURE_")}#%curr%</a>{:L("_COULD_NOT_BE_LOADED_")}',
					titleSrc: function (item) {
						/*           return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';*/
						return '';
					},
					verticalFit: true
				}
			});
		});
	});
</script>